<template>
    <div class="proDetail">
      <van-nav-bar fixed title="商品详情页" left-arrow @click-left="$router.go(-1)" />
      <!-- 轮播图 -->
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.external_url"  width="100%"/>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{images.length}}</div>
        </template>
      </van-swipe>
      <!-- 商品信息 -->
      <div class="info">
        <div class="title">
          <div class="price">
            <span class="new">￥{{ detail.goods_price_min}}</span>
            <span class="old">￥{{ detail.goods_price_max}}</span>
        </div>
        <div class="sales">已售 {{ detail.goods_sales }} 件</div>
        </div>
        <div class="msg">{{detail.goods_name}}</div>
      </div>
      <!-- 提供服务 -->
      <div class="service" @click="serviceDetail">
        <div class="left">
          <span v-for="(item, index) in serviceList" :key="index"><van-icon name="passed" color="#fa2209"/>{{item.name}}</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <van-dialog v-model="showDialog" theme="round-button" close-on-click-overlay>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">- 服务详情 -</van-divider>
        <div class="service-detail">
          <van-row v-for="(item, index) in serviceList" :key="index" type="flex">
            <van-col span="10">{{ item.name }} </van-col>
            <van-col span="14">: {{ item.summary }}</van-col>
          </van-row>
        </div>
      </van-dialog>
      <!-- 评论区 -->
      <div class="comment">
        <div class="comment-title">
          <div class="left">商品评价 ({{ total }}条)</div>
          <div class="right">查看更多 <van-icon name="arrow" /></div>
        </div>
        <van-list v-if="commentList.length > 0"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getProComments">
          <CommentItem :comment="comment" v-for="comment in commentList" :key="comment.comment_id"></CommentItem>
        </van-list>
      </div>
        <!-- 底部 -->
      <div class="footer">
        <div class="icon-home" @click="$router.push('/home')">
          <van-icon name="wap-home-o" />
          <span>首页</span>
        </div>
        <van-badge :content="cartTotal || null">
          <div class="icon-cart" @click="$router.push('/cart')">
            <van-icon name="shopping-cart-o" />
            <span>购物车</span>
          </div>
        </van-badge>
          <div class="btn" v-if="detail.stock_total > 0">
            <div class="btn-add" @click="add()">加入购物车</div>
            <div class="btn-buy" @click="buy()">立刻购买</div>
          </div>
          <van-button v-else color="linear-gradient(to right, #ff6034, #ee0a24)" size="large" round disabled>
              已售罄
          </van-button>
      </div>
      <!--  购物车弹窗 -->
      <van-action-sheet v-model="show" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
        <div class="cart">
          <div class="detail">
            <div class="left">
              <img :src="detail.goods_image" alt="">
            </div>
            <div class="right">
              <div class="price">
                <span>¥</span>
                <span class="nowprice">{{ detail.goods_price_min }}</span>
              </div>
              <div class="count">
                <span>库存</span>
                <span>{{ detail.stock_total }}</span>
              </div>
            </div>
          </div>
          <div class="num-box">
            <span>数量</span>
            <NumberItem v-model="addCount"></NumberItem>
          </div>
          <van-button color="linear-gradient(to right, #ff6034, #ee0a24)"
          size="large"
          round
          :text="mode==='cart' ? '加入购物车' : '立即购买'"
          @click="mode==='cart' ? addCart() : buyNow()">
          </van-button>
        </div>
      </van-action-sheet>
    </div>
  </template>

<script>
import { getGoodsDetail, getGoodsService, getProComments } from '@/api/product'
import { addCart } from '@/api/cart'
import CommentItem from '@/components/CommentItem.vue'
import NumberItem from '@/components/NumberItem.vue'
import checkLogin from '@/mixins/checkLogin'
export default {
  name: 'ProDetailIndex',
  components: {
    CommentItem,
    NumberItem
  },
  mixins: [checkLogin],
  data () {
    return {
      images: [],
      detail: {},
      serviceList: [],
      current: 0,
      showDialog: false,
      total: 0,
      commentList: {},
      show: false,
      mode: 'cart',
      addCount: 1,
      cartTotal: this.$store.getters['cart/cartTotal']
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  watch: {
    cartTotal (newVal) {
      this.total = newVal
    }
  },
  filters: {
    formatPrice (price) {
      return '￥' + price.toFixed(2)
    }
  },
  async created () {
    this.getGoodsDetail()
    this.getGoodsService()
    this.getProComments()
    // this.cartTotal = await this.$store.getters['cart/cartTotal']
    console.log(this.cartTotal)
  },
  methods: {
    onChange (index) {
      this.current = index
    },
    serviceDetail () {
      this.showDialog = true
    },
    // 商品详情
    async getGoodsDetail () {
      const { data: { detail } } = await getGoodsDetail(this.goodsId)
      // 获取图片
      this.images = detail.goods_images
      // 获取详情
      this.detail = detail
    },
    // 获取服务
    async getGoodsService () {
      const { data: { list } } = await getGoodsService(this.goodsId)
      this.serviceList = list
    },
    // 评论
    async getProComments () {
      const { data: { list, total } } = await getProComments(this.goodsId, 3)
      this.commentList = list
      this.total = total
      this.loading = false
      this.finished = true
    },
    showCart () {
      this.show = true
    },
    closeCart () {
      this.show = false
    },
    buy () {
      this.mode = 'buy'
      this.showCart()
    },
    add () {
      this.mode = 'cart'
      this.showCart()
    },
    async addCart () {
      if (this.checkLogin()) {
        const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
        this.cartTotal = data.cartTotal
        this.$toast(`加入购物车成功:${this.cartTotal}`)
        this.closeCart()
      }
    },
    async buyNow () {
      if (this.checkLogin()) {
        console.log('现在购买')
        this.$router.push({
          path: '/pay',
          query: {
            mode: 'buyNow',
            goodsId: this.goodsId,
            goodsSkuId: this.detail.skuList[0].goods_sku_id,
            goodsNum: this.addCount
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.proDetail {
  .van-nav-bar {
      background-color: #66ccff;
  }
  .van-swipe {
    margin-top: 50px;
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .info {
    padding: 10px;
    .title {
      display: flex;
      justify-content: space-between;
      .price {
        .new {
          color: #fa2209;
          font-size: 20px;
        }
        .old {
          color: #959595;
          font-size: 16px;
          text-decoration: line-through;
          margin-left: 5px;
        }
      }
      .sales {
        color: #959595;
        font-size: 16px;
      }
    }
  }
  .service {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    margin-top: 10px;
    font-size: 16px;
    background-color: #fafafa;
    .left {
      margin-left: 4px;
      span {
        margin-right: 10px;
      }
    }
    .right {
      color: #fa2209;
      margin-right: 4px;
    }
  }
  .service-detail {
    // background-color: #66ccff;
    .van-row {
      margin-top: 10px;
    }
  }
  .comment {
    margin-top: 20px;
    padding: 10px;
    .comment-title {
      display: flex;
      justify-content: space-between;
      .right {
        color: #959595;
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .icon-home, .icon-cart {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      .van-icon {
        font-size: 24px;
      }
    }
    .btn {
      display: flex;
      .btn-add,
      .btn-buy {
        margin-right:  10px;
        height: 36px;
        line-height: 36px;
        width: 120px;
        border-radius: 18px;
        background-color: #ffa900;
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
      .btn-buy {
        background-color: #fe5630;
      }
    }
  }
}
.tips {
  padding: 10px;
}
.van-action-sheet {
  .cart {
    background-color: #fdfdfd;
    .detail {
      display: flex;
      .left {
        img {
          width: 90px;
          height: 90px;
        }
        margin: 10px;
      }
      .right {
        flex: 1;
        padding: 10px;
        .price {
          font-size: 14px;
          color: #fe560a;
          .nowprice {
            font-size: 24px;
            margin: 0 5px;
          }
        }
      }
    }
  }
  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    margin-top: 10px;
  }
  .van-button {
    margin-bottom: 10px;
  }
}
</style>
